<script setup>

import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {copyTemplateApi, getTempLateListApi} from "../../apis/TemplateApi.js";
import {Message, Modal} from "@arco-design/web-vue";
import __ from "lodash";
import {goPreviewSurveys} from "../../utils/CommonsUtil.js";
const defaultBg = new URL('../../assets/default-bg.png', import.meta.url).href;
const router = useRouter()
const templateList = ref([])
const pagination = ref({
    current: 1,
    pageSize: 100,
    total: 0, // 总条数初始为0
    showTotal: true, // 显示总数
    showPageSize: true, // 显示页码切换器
    showJumper: true, // 显示快速跳转
});
const isLoading = ref(false)
const isShowCopy = ref(false)
const searchText = ref('')
const copyTemplateId = ref('')
const copyTemplateTitle = ref('')
//搜索标签类型索引
const searchTagType = ref(0)
const searchTagTypeList = ref(['全部', '调查', '考试','投票','测评','测试'])

const goPreView = (template) => {
    router.push("/preview/" + template.id)
}
const getImages = (cover) => {
    let s =  {
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundImage: cover ? "url(" + cover + ")": `url(${defaultBg})`
    }
    if ("../../assets/default-bg.png" === cover){
        s.backgroundImage = `url(${defaultBg})`
    }
    return s
};

const getTemplateList = async () => {
    isLoading.value = true
    let query = {
        status: 1
    }
    if (!__.isEmpty(searchText.value)){
        query.title = searchText.value
        // 标签没选择全部时
        if (searchTagType.value !== 0){
            query.tags = JSON.stringify([searchTagTypeList.value[searchTagType.value],searchText.value])
        }else{
            query.tags = JSON.stringify([searchText.value])
        }
    }else{
        if (searchTagType.value !== 0){
            query.tags = JSON.stringify([searchTagTypeList.value[searchTagType.value]])
        }
    }
    const res = await getTempLateListApi( pagination.value.current,
                    pagination.value.pageSize,query)
    isLoading.value = false
    templateList.value = res.data.records
}
const openCopy = (template) => {
    isShowCopy.value = true
    copyTemplateId.value = template.id
    copyTemplateTitle.value = template.title
}
const copyTemplateClick = async () => {
    const res = await copyTemplateApi({
        id: copyTemplateId.value,
        title: copyTemplateTitle.value
    })
    if (res.code === 0) {
        Message.success('复制成功');
        isShowCopy.value = false
        copyTemplateId.value = ''
        //1秒后跳转回问卷页面
        setTimeout(() => {
            router.push("/surveys")
        }, 1000);
    } else {
        Message.error(res.message);
    }
}
const setTagIndex = (index) => {
    searchTagType.value = index
    getTemplateList()
}
onMounted(async () => {
    await getTemplateList()
})
</script>

<template>

<div class="search w-full pt-10 h-[240px] border-gray-500 mx-auto">
    <div class="w-full mt-12">
        <div class="w-[500px] mx-auto">
            <a-input-search v-model="searchText"
                            @search="getTemplateList()"
                            placeholder="搜索模板" search-button>
                <template #button-icon>
                    <icon-search/>
                </template>
                <template #button-default>
                    搜索
                </template>
            </a-input-search>

        </div>
    </div>
</div>
<a-spin dot tip="加载中" class="mx-auto block my-4" v-show="isLoading"/>
<div class="flex justify-center">
    <div class="mt-3">
        <template v-for="(type,index) in searchTagTypeList">
            <span style="color: #888888;cursor: pointer;margin-right: 10px;"  @click="setTagIndex(index)" v-show="index !== searchTagType">{{ type }}</span>
            <span style="color: #0882ff;cursor: pointer;margin-right: 10px;"  v-show="index === searchTagType">{{ type }}</span>
        </template>
    </div>
</div>
<p class="text-center mt-8" style="font-size: 18px" v-if="templateList.length === 0">暂无模板</p>
<div class="w-4/5 mx-auto p-8 flex flex-wrap justify-start">
    <div class="mb-4 mr-12" v-for="template in templateList" :key="template.id">
        <div class="hotf border border-gray-300 w-36 h-56 rounded mx-auto cursor-pointer"
             :style="getImages(template.cover)">
            <div class="hots w-20 mx-auto pt-16">
                <a-button status="success" type="primary" class="w-20 mb-4" @click="goPreviewSurveys(template.id)">预览</a-button>
                <a-button status="normal" type="primary" class="w-20" @click="openCopy(template)">引用</a-button>
            </div>
        </div>
        <p class="text-center">{{template.title}}</p>
        <p class="text-gray-400 ml-2"><icon-user-group /> {{template.templateNum}}</p>
    </div>

<!--    <a-card-->
<!--        v-for="template in templateList"-->
<!--        :key="template.id"-->
<!--        class="card-demo mb-4"-->
<!--        :title="template.title"-->
<!--        hoverable>-->
<!--        <template #extra>-->
<!--            <a-link @click="goPreView(template)">预览</a-link>-->
<!--            <a-link @click="openCopy(template)">引用</a-link>-->
<!--        </template>-->
<!--        <p class="h-9">描述：{{template.description}}</p>-->
<!--        <br>-->
<!--        <div class="flex justify-between">-->
<!--            <p class="text-right pr-2">题目数量：{{template.questionNum}}</p>-->
<!--            <p class="text-right pr-2">模板使用次数：{{template.templateNum}}</p>-->
<!--        </div>-->
<!--        <div class="mt-2">-->
<!--            <a-space>-->
<!--                <a-tag v-for="(tag,index) in JSON.parse(template.tags)" :key="index">{{ tag }}</a-tag>-->
<!--            </a-space>-->
<!--        </div>-->
<!--    </a-card>-->


    <a-modal v-model:visible="isShowCopy" @ok="copyTemplateClick" >
        <template #title>
            确认复制问卷吗？
        </template>
        <div class="mb-2">请输入问卷标题</div>
        <a-input v-model="copyTemplateTitle"  placeholder="请输入问卷标题" allow-clear />
    </a-modal>
</div>
</template>

<style scoped>
.search{
    background-image: url("../../assets/temp_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.card-demo {
    width: 360px;
    margin-left: 24px;
    transition-property: all;
}
.card-demo:hover {
    transform: translateY(-4px);
}
.hots{
    display: none;
}

.hotf:hover .hots{
    display: block;
}

</style>
